<template>
  <view class="contact-container">
    <!-- 客服二维码区域 -->
    <view class="qrcode-section">
      <view class="qrcode-title">微信客服</view>
      <view class="qrcode-wrapper">
        <image 
          class="qrcode-image" 
          src="/static/qrcode.jpg" 
          mode="aspectFit"
          @longpress="saveQrCode"
        ></image>
        <text class="qrcode-tip">长按保存二维码</text>
      </view>
    </view>
    
    <!-- 其他联系方式 -->
    <view class="contact-section">
      <view class="section-title">其他联系方式</view>
      <view class="contact-list">
        <view class="contact-item" @click="copyText(contactInfo.phone)">
          <view class="item-left">
            <u-icon name="phone" color="#3a8838" size="40"></u-icon>
            <text>客服电话</text>
          </view>
          <view class="item-right">
            <text>{{contactInfo.phone}}</text>
            <text class="copy-text">复制</text>
          </view>
        </view>
        
        <view class="contact-item" @click="copyText(contactInfo.email)">
          <view class="item-left">
            <u-icon name="email" color="#3a8838" size="40"></u-icon>
            <text>客服邮箱</text>
          </view>
          <view class="item-right">
            <text>{{contactInfo.email}}</text>
            <text class="copy-text">复制</text>
          </view>
        </view>
        
        <view class="contact-item">
          <view class="item-left">
            <u-icon name="clock" color="#3a8838" size="40"></u-icon>
            <text>服务时间</text>
          </view>
          <view class="item-right">
            <text>{{contactInfo.workTime}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 常见问题 -->
    <view class="faq-section">
      <view class="section-title">常见问题</view>
      <view class="faq-list">
        <view 
          class="faq-item"
          v-for="faq in faqs"
          :key="faq.id"
          @click="navigateToFaq(faq)"
        >
          <text class="faq-title">{{faq.title}}</text>
          <u-icon name="arrow-right" color="#999" size="28"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contactInfo: {
        phone: '400-888-8888',
        email: 'support@example.com',
        workTime: '周一至周日 9:00-22:00'
      },
      faqs: [
        {
          id: 1,
          title: '如何上传照片？'
        },
        {
          id: 2,
          title: '如何创建相册？'
        },
        {
          id: 3,
          title: '照片无法同步怎么办？'
        },
        {
          id: 4,
          title: '如何设置照片权限？'
        }
      ]
    }
  },
  methods: {
    // 保存二维码到相册
    saveQrCode() {
      uni.showModal({
        title: '提示',
        content: '是否保存客服二维码到相册？',
        success: (res) => {
          if (res.confirm) {
            uni.saveImageToPhotosAlbum({
              filePath: '/static/qrcode.jpg',
              success: () => {
                uni.showToast({
                  title: '保存成功',
                  icon: 'success'
                });
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    },
    
    // 复制文本
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        }
      });
    },
    
    // 跳转到FAQ详情
    navigateToFaq(faq) {
      uni.navigateTo({
        url: `/pages/my/faq-detail?id=${faq.id}`
      });
    }
  }
}
</script>

<style>
.contact-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 30rpx;
}

/* 二维码区域样式 */
.qrcode-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.qrcode-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 30rpx;
  text-align: center;
}

.qrcode-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-image {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 20rpx;
}

.qrcode-tip {
  font-size: 24rpx;
  color: #999;
}

/* 联系方式区域样式 */
.contact-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.contact-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.item-left text {
  font-size: 28rpx;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.item-right text {
  font-size: 26rpx;
  color: #666;
}

.copy-text {
  color: #3a8838 !important;
  font-size: 24rpx !important;
}

/* FAQ区域样式 */
.faq-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-title {
  font-size: 28rpx;
  color: #333;
}
</style> 